<template>
	<view class="select-peopleBox">
		<view style="height: 100rpx">
			<view class="searchBox">
				<u--input class="inputBtn" v-model="searchValue" placeholder="输入关键字搜索" prefixIcon="search"
					prefixIconStyle="font-size: 40rpx;color: #909399" />
				<!-- <view class="iponeBtn" @click="showPicker(selectList)">
					<view style="width: calc(100% - 52rpx);">{{text}}</view>
					<u-icon name="arrow-down" color="#65717D" style="margin-left: 20rpx;"></u-icon>
				</view> -->
				<view class="searchBtn" @click="handlSearch">搜索</view>
			</view>
		</view>
		<base-loading :flag="showloading"/>
		<view style="padding-top: 30vh;" v-if="!list[0]">
			<u-empty mode="list"></u-empty>
		</view>
		<view class="pb240">
			<!-- 单选框 -->
			<u-radio-group placement="column" @change="checkBox" v-if="flag == '1'">
				<view class="box" v-for="(item,index) in list" :key="index">
					<view>
						<view class="flex mb30">
							<view class="name w180">姓名：</view>
							<view class="value">{{item.userName}}</view>
						</view>
						<view class="flex mb20">
							<view class="name w180">所属部门：</view>
							<view class="value" style="padding-right: 50rpx;">{{item.deptPath}}</view>
						</view>
					</view>
					<view class="flex mb30">
						<u-radio shape="circle" :key="index" :name="item.id"></u-radio>
					</view>
				</view>
			</u-radio-group>
			<!-- 多选框 -->
			<u-checkbox-group placement="column" @change="checkBox" v-else>
				<view class="box" v-for="(item,index) in list" :key="index">
					<view>
						<view class="flex mb30">
							<view class="name w180">姓名：</view>
							<view class="value">{{item.userName}}</view>
						</view>
						<view class="flex mb20">
							<view class="name w180">所属部门：</view>
							<view class="value" style="padding-right: 50rpx;">{{item.deptPath}}</view>
						</view>
					</view>
					<view class="flex mb30">
						<u-checkbox shape="circle" :key="index" :name="item.id"></u-checkbox>
					</view>
				</view>
			</u-checkbox-group>
		</view>

		<view class="btn-view">
			<view class="cancelBtn" @click="cancel">取消</view>
			<view class="sureBtn" @click="sureBtn">确定</view>
		</view>
		<u-picker :show="show1" :columns="columns" keyName="label" @confirm="sub" @cancel="show1=false"></u-picker>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				showloading:false,
				// 是否可以多选
				flag: '',
				selfFlag:'',
				// 单选框选中的值
				obj: {},
				// 多选框选中的值
				arr: [],
				searchValue: '',
				text: '手机号码',
				reload: false,
				pageIndex: '1',
				pageSize: '10',
				// 总数
				totalCount: 0,
				list: [],
				show1: false, //下拉框显示
				selectList: [
					[{
						label: '姓名',
						id: 1
					}, {
						label: '手机号码',
						id: 2
					}]
				],
				columns: [
					[]
				], //下拉框数据
			}
		},
		onLoad(options) {
			this.flag = options.flag
			this.selfFlag = options.selfFlag
			console.log(options.selfFlag)
		},
		onReachBottom() {
			if (this.totalCount > this.list.length) {
				this.pageIndex++
				this.getUserList() // 执行方法
			} else {
				// 停止加载
				return false
			}
		},
		created() {
			// 获取人员信息
			this.getUserList()
		},
		methods: {
			// 点击搜索按钮
			handlSearch() {
				this.pageIndex = '1'
				this.list = []
				this.getUserList('1')
				// if (this.text == '手机号码') {
				// 	this.getUserList()
				// } else {
				// 	this.getUserList('1')
				// }
			},
			getUserList(val) {
				this.showloading = true
				let that = this
				let params = {
					selfFlag:that.selfFlag,
					pageIndex: that.pageIndex,
					pageSize: that.pageSize,
				}
				if (!val) {
					params.phone = that.searchValue
				} else {
					params.userName = that.searchValue
				}
				that.request(that.$api.getUserList, params, 'POST').then((res) => {
					setTimeout(()=>{
						// 后端返回的数据
						let rows = res.resultValue.items
						// 后端返回数据的总数
						that.totalCount = res.resultValue.itemCount
						that.list = that.list.concat(rows)
						this.showloading = false
					},300)
					
				})
			},
			// 下拉框确认
			sub(e) {
				this.text = e.value[0].label
				this.show1 = false
				this.searchValue = ''
			},
			//显示下拉框
			showPicker(e, index) {
				this.columns = e
				this.columnsIndex = index
				this.show1 = true
				this.searchValue = ''
			},
			checkBox(id) {
				// 单选框
				if (this.flag == '1') {
					this.list.forEach((item) => {
						if (item.id === id) {
							this.obj = item
						}
					})
				} else {
					this.arr = []
					// 多选框
					id.forEach((item) => {
						this.list.forEach((items) => {
							if (item === items.id) {
								this.arr.push(items)
							}
						})
					})
				}
			},
			// 取消
			cancel() {
				uni.navigateBack({
					delta: 1
				});
			},
			// 确认框
			sureBtn() {
				let that = this
				if (that.flag == 1) {
					if (that.obj.id) {
						uni.showModal({
							title: '提示',
							content: '确定选中这一项？',
							success: function(res) {
								if (res.confirm) {
									// 负责人
									if (that.flag == '1') {
										uni.$emit('oneRadio', that.obj);
									}
									uni.navigateBack({
										url: '../../editJobApplication/editJobApplication'
									});
								} else if (res.cancel) {
									console.log('用户点击取消');
								}
							}
						});
					} else {
						uni.showToast({
							icon: 'none',
							title: '请选择其中一项！',
							duration: 2000
						});
					}
				} else {
					if (that.arr.length > 0) {
						uni.showModal({
							title: '提示',
							content: '确定选中？',
							success: function(res) {
								if (res.confirm) {
									// 监理人
									if (that.flag == '2') {
										uni.$emit('towRadio', that.arr);
									}
									// 督查人员
									if (that.flag == '3') {
										uni.$emit('threeRadio', that.arr);
									}
									// 到岗到位人员
									if (that.flag == '4') {
										uni.$emit('fourRadio', that.arr);
									}
									uni.navigateBack({
										url: '../../editJobApplication/editJobApplication'
									});
								} else if (res.cancel) {
									console.log('用户点击取消');
								}
							}
						});
					} else {
						uni.showToast({
							icon: 'none',
							title: '请至少选中一项！',
							duration: 2000
						});
					}
				}
			},
		},
	}
</script>

<style>
	.w180{
		width: 210rpx;
	}
	.select-peopleBox {
		min-height: 100vh;
		background-color: #F7F8FA;
		position: relative;
	}

	.searchBox {
		box-sizing: border-box;
		height: 100rpx;
		position: fixed;
		width: 100%;
		background-color: #FFFFFF;
		z-index: 520;
		padding: 20rpx 30rpx;
		box-sizing: border-box;
		display: flex;
	}

	.inputBtn {
		width: calc(100% - 360rpx);
		height: 60rpx;
		background-color: #F5F6F9;
		box-sizing: border-box;
		border: none;
		font-size: 28rpx;
	}

	.iponeBtn {
		display: flex;
		padding: 0 10rpx 0 10rpx;
		width: 200rpx;
		height: 60rpx;
		line-height: 60rpx;
		background-color: #F5F6F9;
		color: #65717D;
		text-align: left;
		border-radius: 12rpx;
		font-size: 28rpx;
		margin-left: 10rpx;
		box-sizing: border-box;
	}

	.searchBtn {
		width: 140rpx;
		height: 60rpx;
		background-color: #3473F9;
		color: #fff;
		text-align: center;
		line-height: 60rpx;
		border-radius: 12rpx;
		font-size: 28rpx;
		margin-left: 10rpx;
	}

	.box {
		display: flex;
		justify-content: space-between;
		align-items: center;
		background: url(../../../static/workPeopleBj.png);
		background-size: 100% 100%;
		margin: 20rpx 30rpx 0 30rpx;
		box-sizing: border-box;
		padding: 30rpx;
		background-color: #fff;
		border-radius: 16rpx;
		box-shadow: 0 2px 4px 0 rgba(237, 237, 237, 0.50);
	}

	.name {
		font-size: 28rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #89939E;

	}

	.value {
		width: 60%;
		padding-left: 10rpx;
		font-size: 28rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #333333;
	}

	.btn-view {
		background-color: #FFFFFF;
		position: fixed;
		bottom: 0;
		padding: 60rpx 40rpx 40rpx 40rpx;
		box-sizing: border-box;
		display: flex;
		width: 100%;
	}

	.cancelBtn {
		width: 50%;
		height: 80rpx;
		border: 2rpx solid #3473F9;
		color: #3473F9;
		box-sizing: border-box;
		text-align: center;
		line-height: 80rpx;
		border-radius: 14rpx;
		font-size: 32rpx;
	}

	.sureBtn {
		width: 50%;
		height: 80rpx;
		background-color: #3473F9;
		color: #fff;
		text-align: center;
		line-height: 80rpx;
		margin-left: 20rpx;
		border-radius: 14rpx;
		font-size: 32rpx;
	}
</style>
